<template lang="html">
  <div class="goods-group--content">
    <div class="checked-list">
      <span>已选课程</span>
      <ul>
        <li v-for='(item, index) in classList'>
          <img :src="item.image_url" alt="">
          <span>{{item.goods_name}}</span>
          <i class="glyphicon glyphicon-close" @click='deleteClass(index)'></i>
        </li>
      </ul>
    </div>
    <el-table
      ref="multipleTable"
      :data="dataList"
      height="250"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        label="分类"
        width="120"
        prop="cat_name">
      </el-table-column>
      <el-table-column
        prop="goods_name"
        label="课程名称"
        width="120">
      </el-table-column>
      <el-table-column
        label="价格"
        show-overflow-tooltip>
        <template slot-scope='scope'>
          ￥{{scope.row.goods_price}}
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
  small
  @current-change='changePage'
  layout="prev, pager, next"
  :total="totalData">
</el-pagination>
<el-button @click="addCheckList" type="primary" size="mini">确定</el-button>
  </div>
</template>

<script>
import ajax from '@/utils/public'
import { addCourseList, selectCourseList } from '@/api/course'
export default {
  props: [
    'goods'
  ],
  data () {
    return {
      classList: [],
      dataList: [],
      checkList: [],
      totalData: 0
    }
  },
  watch: {
    goods () {
      let ajaxs = []
      if (this.goods.length > 0) {
        this.goods.forEach((item, index) => {
          ajaxs.push(selectCourseList({id: item.id}))
        })
        // 并行获取数据 这步是关键 利用promise.all 进行的并行请求封装得到结果后统一处理
        ajax.fetchAll(ajaxs).then((res) => {
          let arrs = []
          for (let item of res) {
            arrs.push(item.data.dataList[0])
          }
          this.classList = arrs
          this.changeParentsData()
          // 手动设置选中
          this._addCourseList()
        })
      }
    }
  },
  created () {
    addCourseList({pageSize: 5, is_putaway: 1}).then(res => {
      this.dataList = res.data.dataList
      this.totalData = res.data.total
    })
  },
  methods: {
    // 获取商品列表
    _addCourseList (page) {
      addCourseList({page: page || 1, is_putaway: 1}).then(res => {
        this.dataList = res.data.dataList
        this.totalData = res.data.total
        this.$nextTick(() => {
          this.classList.length && this.classList.forEach(row => {
            this.dataList.forEach(item => {
              if (row.id === item.id) {
                this.$refs.multipleTable.toggleRowSelection(item)
              }
            })
          })
        })
      })
    },
    // 计算总的选中的商品
    addCheckList () {
      let ids = []
      for (let item of this.classList) {
        ids.push(item.id)
      }
      for (let item of this.checkList) {
        !ids.includes(item.id) && this.classList.push(item)
      }
      this.changeParentsData()
    },
    // 删除某一商品
    deleteClass (index) {
      this.classList.splice(index, 1)
      this.changeParentsData()
    },
    // 记录选中的商品
    handleSelectionChange (section) {
      this.checkList = section
    },
    changePage (page) {
      this._addCourseList(page)
    },
    // 修改上传给父组件的数据
    changeParentsData () {
      this.$emit('upGoods', this.classList)
    }
  }
}
</script>

<style lang="less">
.checked-list{
  ul{
    display: block;
    li{
      float: left;
      margin: 10px;
      position: relative;
      list-style: none;
      width: 80px;
      height: 80px;
      span{
        position: absolute;
        width: 100%;
        text-align: center;
        color: #333;
        padding: 3px 0;
        font-size: 12px;
        background-color: rgba(0,0,0, 0.1);
        bottom: 0;
      }
      i{
        font-size: 12px;
        color: #666;
        position: absolute;
        top: 10px;
        right: 10px;
        cursor: pointer;
        &:hover{
          color: #333;
        }
      }
    }
    img{
      width: 80px;
      height: 80px;
    }
  }
}
</style>
